<template>
  <div class="advancedForm-component">
    <el-form
      class="form-inline"
      ref="ruleFormRef"
      :inline="true"
      :lable-position="'right'"
      :model="formInline"
    >
      <el-row
        :class="{
          'not-show': byHeight && !isExpand
        }"
        :gutter="gutterWidth"
      >
        <el-col
          v-for="(item,index) in columns"
          :span="item.span"
          :key="item.name"
          v-show="byHeight ? true : (index < (showRow * 3) || isExpand)"
        >
          <el-form-item
            :label="item.title"
            :prop="item.name"
            :label-width="labelWidth"
            v-if="item.type === 'input'"
          >
           <el-input
             :class="`${item.name}`"
             v-model="formInline[item.name]"
             :placeholder="item.placeholder"
           />
          </el-form-item>
          <template v-else-if="item.type === 'date'">
            <el-form-item
              :label="item.title"
              :prop="item.name"
              :label-width="labelWidth"
            >
              <el-date-picker
                type="date"
                value-format="YYYY-MM-DD"
                v-model="formInline[item.name]"
                :placeholder="item.placeholder"
              />
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>
    <div class="search-form-btn">
      <el-button class="form-btn" type="primary" @click="onSubmit">查询</el-button>
      <el-button class="form-btn" @click="resetForm">重置</el-button>
      <el-button type="text" @click="isExpand = !isExpand">
        {{ isExpand ? '合并' : '展开'}}
        <i class="iconfont icon-up-arrows form-iconfont" v-if="isExpand"></i>
        <i class="iconfont icon-down-arrows form-iconfont" v-else></i>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props:{
    labelWidth: {
      type: String,
      default: '100px',
    },
    gutterWidth: {
      type: Number,
      default: 24,
    },
    showRow: {
      type: Number,
      default: 1,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    byHeight: {
      type: Boolean,
      default: false,
    },
  },
  data(){
    return{
      formInline: {},
      isExpand: false,
    }
  },
  watch:{
    deep: true,
    columns:{
      handler(val){
        // 动态获取的form-item的字段，需要通过监听值进行设置，不能在mounted里设置，数据不能回显到输入框内
        this.init()
      }
    },
  },
  methods:{
    init(){
      this.columns.forEach(item =>{
        this.formInline[item.name] = null
      })
    },
    onSubmit(){
      this.$message.success('查询成功')
    },
    resetForm(){
      this.$refs['ruleFormRef'].resetFields()
      this.columns.forEach(item =>{
        this.formInline[item.name] = null
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.advancedForm-component{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.form-inline{
  flex: 1;
}
.not-show{
  height: 60px;
  overflow: hidden;
}
.form-iconfont{
  font-size: 12px;
}
</style>
<style lang="scss">
.form-btn{
  padding: 5px 10px;
}
.form-btn.el-button--primary{
  background: #62afe3;
  border: 1px solid #62afe3 !important;
}
</style>
